.knowledge {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

  .section {
    padding-bottom: 1rem;
    flex: 1;
    padding-top: 1rem;
    background: var(--bg-body);

    .list {
      width: 100%;
      overflow: hidden;
      padding: 1rem;
      background-color: var(--bg-second);
      border-radius: var(--border-radius);
      box-shadow: var(--box-shadow);

      .list_item {
        position: relative;
        padding: 0 0 1rem 0;

        a {
          color: #f40a12;
          text-decoration: none;
          background-color: transparent;
          outline: none;
          cursor: pointer;
          transition: color 0.3s;
          -webkit-text-decoration-skip: objects;

          header {
            display: flex;
            align-items: center;

            .title {
              color: var(--main-text-color);
              overflow: hidden;
              font-weight: 600;
              font-size: 16px;
              line-height: 22px;
              text-overflow: ellipsis;
              white-space: nowrap;
              font-synthesis: style;
            }

            .title:hover {
              color: #f40a12;
            }

            .time {
              color: #8590a6;
            }

            .ant-divider-vertical {
              position: relative;
              top: -0.06em;
              display: inline-block;
              height: 0.9em;
              margin: 0 8px;
              vertical-align: middle;
              border-top: 0;
              border-left: 1px solid rgba(0, 0, 0, 0.06);
            }

            .ant-divider {
              box-sizing: border-box;
              // margin: 0;
              // padding: 0;
              color: #000;
              font-size: 14px;
              font-variant: tabular-nums;
              line-height: 1.5715;
              list-style: none;
              font-feature-settings: 'tnum';
              border-top: 1px solid rgba(0, 0, 0, 0.06);
            }
          }

          main {
            display: flex;
            flex-wrap: nowrap;
            padding-top: 12px;

            .cover {
              position: relative;
              flex: 0 0 auto;
              width: 190px;
              max-height: 150px;
              min-height: 100px;
              border-radius: var(--border-radius);
              margin-right: 1rem;
              overflow: hidden;

              img {
                position: absolute;
                top: 50%;
                left: 50%;
                height: 100%;
                width: 100%;
                transform: translate3d(-50%, -50%, 0);
                object-fit: cover;
              }
            }

            .text {
              display: flex;
              flex-direction: column;
              justify-content: space-between;

              .name {
                display: -webkit-box;
                max-width: 100%;
                color: var(--main-text-color);
                overflow: hidden;
                font-size: 14px;
                text-overflow: ellipsis;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
              }

              .views {
                width: 100%;
                color: #8590a6;
                font-size: 14px;
                line-height: 20px;
                margin-top: 0.8rem;
              }
              .dot {
                margin: 0 8px;
              }
            }
          }
        }

        a:hover {
          color: #f33;
        }

        a:active,
        a:focus,
        a:hover {
          text-decoration: none;
          outline: 0;
        }
      }

      .list_item:after {
        content: '';
        position: absolute;
        bottom: 1rem;
        width: 100%;
        height: 1px;
        background: var(--border-color);
      }
    }
  }

  .aside {
    width: 20rem;
    margin-left: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}
